import nodeUtil from '../utils/node-util';
Component({
  externalClasses: ['w-class'],
  properties: {
    //是否显示notice-bar
    show: {
      type: Boolean,
      value: true
    },
    showCloseIcon: {
      type: Boolean,
      value: false
    },
    //notice-bar类型 ：静止，左右滚动，上下滚动
    type: {
      type: String,
      value: 'still',
      options: ['still', 'roll', 'swip']
    },
    // 轮播数组
    swipArr: Array,
    // 前置图标路径
    frontIconPath: {
      type: String,
      value: '/images/icon/notice.png'
    },
    //前置图标大小
    frontIconSize: {
      type: Number,
      value: 28
    },
    //关闭图标路径
    closeIconPath: {
      type: String,
      value: '/images/icon/close.png'
    },
    //关闭图标大小
    closeIconSize: {
      type: Number,
      value: 28
    },

    // 背景颜色
    backgroundcolor: {
      type: String,
      value: '#78C6D6'
    },
    // 字体颜色
    color: {
      type: String,
      value: '#FFFFFF'
    },
    // 滚动速度
    speed: {
      type: Number,
      value: 1500
    },
  },

  data: {
    wrapWidth: 0,
    width: 0,
    duration: 0,
    animation: null,
    timer: null,
  },

  detached() {
    this.destroyTimer();
  },

  ready() {
    if (this.properties.type === 'roll' && this.properties.show) {
      this.initAnimation();
    }
  },

  methods: {
    async initAnimation() {
      const rect = await nodeUtil.getNodeRectFromComponent(this, '.noticebar-content');
      const wrapRect = await nodeUtil.getNodeRectFromComponent(this, '.noticebar-content-wrap');
      const duration = rect.width / 40 * this.data.speed;
      const animation = wx.createAnimation({
        duration: duration,
        timingFunction: 'linear',
      });
      this.setData({
        wrapWidth: wrapRect.width,
        width: rect.width,
        duration: duration,
        animation: animation
      }, () => {
        this.startAnimation();
      });
    },
    startAnimation() {
      //reset
      if (this.data.animation.option.transition.duration !== 0) {
        this.data.animation.option.transition.duration = 0;
        const resetAnimation = this.data.animation.translateX(this.data.wrapWidth).step();
        this.setData({
          animationData: resetAnimation.export()
        });
      }
      this.data.animation.option.transition.duration = this.data.duration;
      const animationData = this.data.animation.translateX(-this.data.width).step();
      setTimeout(() => {
        this.setData({
          animationData: animationData.export()
        });
      }, 100);
      const timer = setTimeout(() => {
        this.startAnimation();
      }, this.data.duration);
      this.setData({
        timer,
      });
    },
    destroyTimer() {
      if (this.data.timer) {
        clearTimeout(this.data.timer);
      }
    },
    //still 和 roll情况下：item点击事件
    handleTap() {
      this.triggerEvent('onTap', {});
      this.setData({
        timer: null
      });
    },
    //swip时：item点击事件
    onSwip(e) {
      this.triggerEvent('onTap', {
        ...e.currentTarget.dataset
      });
    },
    //关闭图标点击事件（隐藏notice-bar）
    onClose() {
      this.setData({
        timer: null,
        show: false
      });
    },
    // ============ 开放函数 =============

    /**
     * 动态设置通告栏内容后刷新动画
     */
    linFlush() {
      this.destroyTimer();
      this.initAnimation();
    },
  }
});